html,body{margin: 0;
padding: 0;}


@font-face {
  font-family:'Mister Sally' ;
  src: url('font/Mister\ sally.ttf');
}


 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: 0%;
    color:rgba(138, 73, 4, 0.749);}

    .navbar-toggler{color: lightblue;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}

.entete{width: 100%;
height: 580PX;
background-color:#FFBE00 ;}

.logo{width: 225px;
height: 350px;
margin-top: -950px;
margin-left: 42%;}
h1
{text-align: center;
    position: absolute;
    margin-top: -550px;
    margin-left: 10px;
color:white;
font-size: 40px;
  font-family: sans-serif;
  font-weight: 700;
  font-style: normal;
  padding-top: 80PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 100px;
margin-left: 27%;
}

.slogan2{font-family:sans-serif ;
color:black;
font-size: 30px;
font-weight: 500;
font-style: italic;
text-align: center;
position: absolute;
margin-top: -200px;
margin-left: 22%;
line-height: 40PX;
}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: showup 10S; 
  animation-fill-mode:both;
  
}


  .slogan2:last-of-type p {
  
  animation: reveal 10s ;
  animation-fill-mode: both;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}



@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:0;width:0px;}
    30% {width:755px;}
    80% {opacity:1;}
    100% {opacity:1;width:755px;}
}




.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}
.titreheader{color:white;
font-size:26PX;
margin-top:-340px;
margin-left: 37%;}
   h2{  font-family:sans-serif;
    font-size: 36PX;
    font-weight:800;
    margin-top: 40px;
  text-align: center; 
color:rgba(138, 73, 4, 0.749);
 }






.textecontact{font-family:sans-serif;
font-size: 24px;
text-align: center;
margin-top: 20PX;
color:black;}

  h2{font-family:sans-serif;
    font-size: 36PX;
    font-weight: 700;
    margin-top: 40px;
  text-align: center; 
color:rgba(138, 73, 4, 0.749);
 }

.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}

 .cadre{width:45%;
    height: 600PX;
  border: solid 3PX;
  border-color:rgba(138, 73, 4, 0.749);
  border-radius: 20PX;
  margin-top: 10%;
  margin-left: 28%;
  background-color: #ece2b0;
 }

 input[type="text"]
  {color: #1b030a;
    border-radius: 50PX;
    border: solid 3px;
    border-color: rgba(138, 73, 4, 0.749);
    height:40px;
    width: 350px;;
    margin-top:  80px;
    margin-left: 38%;}
    
    input[type="email"] {color: #1b030a;
        border-radius: 50PX;
        border: solid 3px;
        border-color:rgba(138, 73, 4, 0.749);
        height:40px;
        width: 350px;
        position: absolute;
        margin-top: 30PX;
        margin-left: 38%;}
        


textarea{
    margin-top: 120px;
border-radius: 50px;
border: solid 3px;
border-color:rgba(138, 73, 4, 0.749);
width: 454px;
height: 300px;
margin-left: 34%;
padding-left: 5%;
}



button[type="submit"]
{position: absolute;
margin-top: 414px;
margin-left: 0px ;
height: 35px;
width: 120px;
border: solid ;
border-radius: 10px;
color:white;
font-family: sans-serif;
font-weight: 400;
font-style: normal;
background-color:#FFBE00;
font-weight: bold;
}
input::-webkit-input-placeholder{padding-left: 20%;}
footer{max-width: 100%;
height: 370px;
margin-top: 220PX;
background-color: #FFBE00;}

.logofooter{height: 210PX;
width: 140PX;
margin-left: 46%;}
h4{
  margin-left: 42%;
  position: absolute;
font-family:sans-serif;
font-size: 24PX;
font-weight: 800;
color:white;
margin-top: -40px;
text-align: center;
}

.pfooter{font-size: 25PX;
text-align: center;
font-weight: 400;
margin-top: 70px;
margin-left: 45%;
position: absolute;
color:black;}
  
.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 38%;
margin-top: 125PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 52%;
    margin-top: 100PX;
  }
.stylephp{margin-top: -300PX;
    text-align: center;
    
    font-family: 'mereinda';
    font-weight: 700PX;
    font-size: 16PX;
}

@media screen and (min-width: 300px) and (max-width: 650px){

.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: -35PX;
font-size: 18PX;
font-weight: 600;
 margin-left: 4%;
 position: static;
}
.navbar-nav{flex-direction: column;
margin-top: 4PX;}


 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: 0%;
    color:rgb(154, 120, 56);}

    .navbar-toggler{margin-left: 80%;
        z-index: 1;
        color: lightblue;}
    .navbar-toggler-icon{color:gold;}


.entete{height: 300px;
}
.logo{
height: 150px;
width: 100PX;
margin-top: -520px;
margin-left: 38%;}

h1
{text-align: center;
    position: absolute;
    margin-top: -300px;
    margin-left: -23px;
color:white;
font-size: 16px;
  font-family:  sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

    .titreheader{color:white;
font-size:12PX;
margin-top:-200px;
margin-left: 27%;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:#6c6c64 ;
font-size: 15px;
text-align: center;
position: absolute;
margin-top: -130px;
margin-left: 2%;
line-height: 20PX;
color: black;}

.textecontact{font-family:sans-serif;
font-size: 20px;
text-align: center;
margin-top: 20PX;
color: black;
width: 90%;
margin-left: 6%;}


h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: showup 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 18s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}}

 h2{font-family:sans-serif;
    font-size: 28PX;
    font-weight: 700;
    margin-top: 20px;
  text-align: center; 
color:rgba(138, 73, 4, 0.749);
 }
 input[type="text"]
  {color: #1b030a;
    border-radius: 50PX;
    border: solid 3px;
    border-color:rgba(138, 73, 4, 0.749);
    height:40px;
    width: 325px;
    margin-top:  50px;
    margin-left: 5%;}
    
    input[type="email"] {color: #1b030a;
        border-radius: 50PX;
        border: solid 3px;
        border-color: rgba(138, 73, 4, 0.749);
        height:40px;
        width: 325px;
        position: absolute;
        margin-top: 30PX;
        margin-left: 5%;}
        


textarea{
    margin-top: 120px;
border-radius: 20px;
border:solid  3px;
border-color:rgba(138, 73, 4, 0.749);
width: 330px;
height: 300px;
margin-left: 3%;
padding-left: 5%;
}



button[type="submit"]
{position: absolute;
margin-top: 430px;
margin-left:  -230px;
height: 40px;
width: 150px;
border: solid ;
border-radius: 50px;
color:white;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
background-color:#FFBE00;
font-weight: bold;
}
input::-webkit-input-placeholder{padding-left: 20%;}

footer{max-width: 100%;
height: 260px;
margin-top: 120PX;
background-color: #FFBE00;}

.logofooter{height: 128PX;
width: 90PX;
margin-left: 40%;}
h4{
  margin-left: 32%;
  position: absolute;
font-family:sans-serif;
font-size: 16PX;
font-weight: 600;
color:white;
margin-top: -30px;
text-align: center;
}

.pfooter{font-size: 20PX;
text-align: center;
font-weight: 400;
margin-top: 40px;
margin-left: 33%;
position: absolute;
color: black;}

 .mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 8%;
margin-top: 105PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 45%;
    margin-top: 80PX;
  }

}




 @media screen and (min-width: 651px) and (max-width: 1023px){
.navbar-nav > li > a
{font-size:18px;
   font-family:Mochiy,sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: 0%;
    color:rgb(154, 120, 56);}

    .navbar-toggler{color:#C9C094;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}



.entete{width: 100%;
height: 580PX;
color:#FFBE00;}

.logo{margin-left: 37%;}
h1
{text-align: center;
    position: absolute;
    margin-top: -480px;
    margin-left: -130px;
color:white;
font-size: 36px;
  font-family:sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{margin-top: -320px;
  margin-left: 58px;
}



 .slogan1{font-family:sans-serif;
  font-style: italic;
color:black ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}
.slogan2{font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 28px;
text-align: center;
position: absolute;
margin-top: -220px;
margin-left: 3%;}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: reveal 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 10s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}
}
.textecontact{font-family:sans-serif;
font-size: 24px;
text-align: center;
margin-top: 35PX;
color: black;}

  h2{font-family:sans-serif;
    font-size: 36PX;
    font-weight: 700;
    margin-top: 50px;
  text-align: center; 
color:rgb(154, 120, 56);
 }

.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 10PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 66%;
}

 .cadre{width:45%;
    height: 600PX;
  border: solid 3PX;
  border-color: rgb(154, 120, 56);
  border-radius: 20PX;
  margin-top: 10%;
  margin-left: 28%;
  background-color: #ece2b0;
 }

 input[type="text"]
  {color: rgb(154, 120, 56);
    border-radius: 50PX;
    border: solid 3px;
    border-color: rgb(154, 120, 56);
    height:40px;
    width: 350px;;
    margin-top:  80px;
    margin-left: 26%;}
    
    input[type="email"] {color:rgb(154, 120, 56);
        border-radius: 50PX;
        border: solid 3px;
        border-color:rgb(154, 120, 56);
        height:40px;
        width: 350px;
        position: absolute;
        margin-top: 30PX;
        margin-left: 26%;}
        


textarea{
    margin-top: 120px;
border-radius: 50px;
border: solid 3px;
border-color:rgb(154, 120, 56);
width: 454px;
height: 300px;
margin-left: 18%;
padding-left: 5%;
}



button[type="submit"]
{position: absolute;
margin-top: 414px;
margin-left: 0px ;
height: 35px;
width: 120px;
border: solid ;
border-radius: 10px;
color:white;
font-family: serif;
font-weight: 400;
font-style: normal;
background-color:#FFBE00;
font-weight: bold;
}
input::-webkit-input-placeholder{padding-left: 20%;}
footer{max-width: 100%;
height: 320px;
margin-top: 150PX;
background-color: #FFBE00;}

h4{
  margin-left: 40%;
  position: absolute;
font-family:sans-serif;
font-size: 20PX;
font-weight: 800;
color:white;
margin-top: -45px;
}
.logofooter{margin-left: 45%;}
.pfooter{font-size: 26PX;
text-align: center;
font-family:sans-serif;
margin-top: 35px;
margin-left: 42%;
position: absolute;
color: black;}

.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 30%;
margin-top: 85PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 58%;
    margin-top: 60PX;
  }
 

}


 @media screen and (min-width: 1300px) {
html,body{margin: 0;
padding: 0;}

@font-face {
	font-family: 'Ruthligos';
	src: url('font/Ruthligos.ttf')}
@font-face {
  font-family:'Mister Sally' ;
  src: url('font/Mister\ sally.ttf');
}



 .navbar-nav > li > a
{font-size:22px;
  font-family:cursive;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgb(154, 120, 56);}

    .navbar-toggler{color: lightblue;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}



.entete{width: 100%;
height: 580PX;
background-color: #FFBE00;}
h1
{text-align: center;
    position: absolute;
    margin-top: -480px;
    margin-left: 100px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}


.titreheader{margin-top: -300px;
margin-left: 31%;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 26px;
text-align: center;
position: absolute;
margin-top: -180px;
margin-left: 28%;}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: reveal 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 14s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}
}



 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgba(138, 73, 4, 0.749);}

    
.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}

   h2{font-family:sans-serif;
    font-size: 36PX;
    font-weight: 700;
    margin-top: 40px;
  text-align: center; 
color:rgb(154, 120, 56);
 }
 
 
.accroche{font-family:sans-serif ;
 text-align: center;
font-size: 24px;
color: black;
margin-top: 30PX;}

input[type="text"]
  {color: #1b030a;
    border-radius: 50PX;
    border: solid 3px;
    border-color: rgb(154, 120, 56);
    height:40px;
    width: 350px;;
    margin-top:  80px;
    margin-left: 40%;}
    
    input[type="email"] {color: #1b030a;
        border-radius: 50PX;
        border: solid 3px;
        border-color:rgb(154, 120, 56);
        height:40px;
        width: 350px;
        position: absolute;
        margin-top: 30PX;
        margin-left: 40%;}
        


textarea{
    margin-top: 120px;
border-radius: 50px;
border: solid 3px;
border-color:rgb(154, 120, 56);
width: 454px;
height: 300px;
margin-left: 37%;
padding-left: 5%;
}



button[type="submit"]
{position: absolute;
margin-top: 414px;
margin-left: 0px ;
height: 35px;
width: 120px;
border: solid ;
border-radius: 10px;
color:white;
font-family: sans-serif;
font-weight: 400;
font-style: normal;
background-color:#FFBE00;
font-weight: bold;
}
input::-webkit-input-placeholder{padding-left: 20%;}

footer{max-width: 100%;
height: 340px;
margin-top: 60PX;
background-color: #FFBE00;}

h4{
  margin-left: 44%;
  position: absolute;
font-family:sans-serif;
font-size: 24PX;
font-weight: 800;
color:white;
margin-top: -60px;
}

.pfooter{font-size: 28PX;
text-align: center;
font-family:sans-serif;
margin-top: 30px;
margin-left: 45%;
position: absolute;
color: black;}




.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 38%;
margin-top: 105PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 52%;
    margin-top: 80PX;
  }
}







 @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {


.entete{width: 100%;
height: 580PX;
color: #FFBE00;}

.logo{width: 225px;
height: 350px;
margin-top: -950px;
margin-left: 42%;}
h1
{text-align: center;
    position: absolute;
    margin-top: -500px;
    margin-left: 10px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 80PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{margin-left:27%;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:black ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 100px;
margin-left: 20%;
}

.slogan2{font-family:sans-serif ;
color:black;
font-size: 30px;
font-weight: 500;
font-style: italic;
text-align: center;
position: absolute;
margin-top: 20%;
margin-left: 10%;
line-height: 40PX;
}

 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgba(138, 73, 4, 0.749);}

 .navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}  


 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2 {font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 26px;
text-align: center;
position: absolute;
margin-top: -170px;
margin-left: 20%;}


.logofooter{margin-top: -20PX;}

footer{max-width: 100%;
height: 320px;
margin-top: 90PX;
background-color: #FFBE00;}
h4{
  margin-left: 43%;
  position: absolute;
font-family:sans-serif;
font-size: 22PX;
font-weight: 800;
color:white;
margin-top: -54px;
}

.pfooter{font-size: 20PX;
text-align: center;
margin-top: 50px;
margin-left: 47%;
position: absolute;
color: black;
font-family: sans-serif;}

.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 38%;
margin-top: 105PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 52%;
    margin-top: 80PX;
  }

}